<template>
  <div id="comment-list">
    <div v-for="c in comments" :key="c.name">
      <div class="username">
        {{ c.name }} &emsp;&emsp;
        <i class="iconfont icon-riqi" style="color:#ccc;"></i>&nbsp;
        <span style="color:#ccc;">{{c.date}}</span>
      </div>
      <div class="comment">
        <div style="width:100%;">{{c.content}}</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "CommentList",
  props:{
    comments:Array
  }
}
</script>

<style scoped>
#comment-list{
  width:100%;
  margin:0 auto;

  border-bottom: 1px solid #D7DADB;
  padding-bottom: 20px;
}
#comment-list > div{
  margin-top:10px;
}

.username{
  color:#2C3E50;
}
.comment{
  margin-top:2px;
  text-indent: 2em;
}
</style>
